Add opt-in sourceMap option to emit .css.map files and sourceMappingURL comments alongside compiled CSS#5806
Open
cmalonzo wants to merge 2 commits into
Open
Conversation
…RL comments alongside compiled CSS
cmalonzo
requested review from
apostolisms,
bmiddha,
dmichon-msft,
iclanton,
jxanthony and
octogonz
as code owners
Contributor
Author
|
Blocker for SharePoint/sp-dev-docs#10831 |
iclanton
approved these changes
May 20, 2026
| { | ||
| "changes": [ | ||
| { | ||
| "comment": "Add opt-in sourceMap option to emit .css.map files and sourceMappingURL comments alongside compiled CSS", |
Member
There was a problem hiding this comment.
Suggested change
| "comment": "Add opt-in sourceMap option to emit .css.map files and sourceMappingURL comments alongside compiled CSS", | |
| "comment": "Add opt-in sourceMap option to emit `.css.map` files and `sourceMappingURL` comments alongside compiled CSS.", |
|
|
||
| "sourceMap": { | ||
| "type": "boolean", | ||
| "description": "If true, a .css.map source map file will be written next to each emitted .css file, and a sourceMappingURL comment will be appended to the .css. Defaults to false." |
Member
There was a problem hiding this comment.
Suggested change
| "description": "If true, a .css.map source map file will be written next to each emitted .css file, and a sourceMappingURL comment will be appended to the .css. Defaults to false." | |
| "description": "If true, a `.css.map` source map file will be written next to each emitted `.css` file, and a `sourceMappingURL` comment will be appended to the `.css`. Defaults to `false`." |
| map.sources = map.sources.map((source) => { | ||
| const normalized: string = Path.convertToSlashes(source); | ||
| // sources[] are stored as paths relative to the .css.map output file, so they include a | ||
| // checkout-specific prefix like "../../../user/rushstack/heft-plugins/...". Strip everything |
Member
There was a problem hiding this comment.
Shouldn't they be relative paths?
| }); | ||
| } | ||
| if (map.sourcesContent) { | ||
| map.sourcesContent = map.sourcesContent.map((entry) => entry.replace(/\r\n/g, '\n')); |
Member
There was a problem hiding this comment.
Suggested change
| map.sourcesContent = map.sourcesContent.map((entry) => entry.replace(/\r\n/g, '\n')); | |
| map.sourcesContent = map.sourcesContent.map(Text.convertToLf); |
(Text comes from node-core-library)
| // cssFilename is identical across all output folders. | ||
| const cssMapBasename: string | undefined = | ||
| sourceMap && result.sourceMap ? `${cssFilename}.map` : undefined; | ||
| const finalCss: string = cssMapBasename ? `${css}\n/*# sourceMappingURL=${cssMapBasename} */\n` : css; |
Member
There was a problem hiding this comment.
Suggested change
| const finalCss: string = cssMapBasename ? `${css}\n/*# sourceMappingURL=${cssMapBasename} */\n` : css; | |
| const finalCss: string = cssMapBasename ? `${css}\n//# sourceMappingURL=${cssMapBasename}\n` : css; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes sp-dev-docs#10831 — SPFx 1.23 dev builds lost CSS/SCSS source-map support because
@rushstack/heft-sass-pluginnever passedsourceMap: truetosass-embedded, so no.css.mapfiles were produced and DevTools "Sources" pointed at intermediate compiled files instead of the original.scss.Changes
src/SassProcessor.tssourceMap?: booleantoISassProcessorOptionssourceMap: true, passessourceMap: trueandsourceMapIncludeSources: truetocompileStringAsyncsoresult.sourceMapis populated<file>.css.mapalongside the.css, withsources[]rewritten from internalheft:URLs to paths relative to the map file's directory (whatsource-map-loaderexpects); appends/*# sourceMappingURL=<basename>.css.map */to the.cssfalse— no behavior change for existing consumerssrc/SassPlugin.tssourceMap?: booleantoISassConfigurationJsonand threads it through toISassProcessorOptionssrc/schemas/heft-sass-plugin.schema.json"sourceMap"boolean propertysrc/test/SassProcessor.test.tsdescribe('sourceMap option'):sourceMap: trueemits a.css.mapand asourceMappingURLcomment; map is valid JSON v3 with non-emptymappingsandsources[0]resolving to the input.scsssourceMapunset) produces no.css.mapand nosourceMappingURLcomment, confirming byte-identical output to pre-change behaviorsourceMap: true+doNotTrimOriginalFileExtension: trueuses the correctfoo.scss.css.mapfilename in both the written file and thesourceMappingURLcommentDownstream contract
The plugin's only obligation to consumers is:
<file>.css.map/*# sourceMappingURL=<basename>.css.map */comment in the emitted.csssources[]entries that resolve (relative to the.css.map) to the original.scsson disk